<template>
    <div>
        <el-select v-model="selectTreeName" placeholder="请选择">
            <el-option
                :value="selectTree"
                style="height: 100%; padding: 0"
                disabled
            >
                <el-tree
                    :data="data"
                    ref="tree"
                    show-checkbox
                    node-key="id"
                    :check-on-click-node="true"
                    :expand-on-click-node="false"
                    :default-expanded-keys="[]"
                    :default-checked-keys="[]"
                    :props="defaultProps"
                    @node-click="
                        (data, node, item) =>
                            treeHandleNodeClick(data, node, item)
                    "
                    @check-change="treeCheckChange"	
                >
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectTreeName: "",
            selectTree: "",
            data: [
                {
                    id: 1,
                    label: "一级 1",
                    children: [
                        {
                            id: 4,
                            label: "二级 1-1",
                            children: [
                                {
                                    id: 9,
                                    label: "三级 1-1-1",
                                },
                                {
                                    id: 10,
                                    label: "三级 1-1-2",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: "一级 2",
                    children: [
                        {
                            id: 5,
                            label: "二级 2-1",
                        },
                        {
                            id: 6,
                            label: "二级 2-2",
                        },
                    ],
                },
                {
                    id: 3,
                    label: "一级 3",
                    children: [
                        {
                            id: 7,
                            label: "二级 3-1",
                        },
                        {
                            id: 8,
                            label: "二级 3-2",
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
        };
    },
    methods: {
        getCheckedNodes(e){
            console.log(e);
        },
        treeHandleNodeClick(e) {
            //console.log(e);
            this.selectTreeName = e.label;
        },
        treeCheckChange(data, node, item){
            let nodes = this.$refs.tree.getCheckedNodes();
            let keys = this.$refs.tree.getCheckedKeys();
            console.log(nodes);
            console.log(keys);
            // console.log(data);
            // console.log(node);
            // console.log(item);
        }	
    },
};
</script>

<style lang="scss" scoped></style>
